<!--
 * @Author: Lin_xi
 * @Date: 2021-06-28 14:34:35
 * @LastEditors: Lin_xi
 * @LastEditTime: 2021-06-28 17:34:04
 * @Description: demo
-->
<template>
    <div class="setup">
        <el-button @click="handleClick">点击</el-button>
    </div>
</template>



<script>
import { toRefs, reactive } from "vue";
import getAge from "@/composables/setup.js";
export default {
    props: {
        user: {
            type: String,
            default: "",
        },
    },
    setup(props, { attrs, slots, emit }) {
        // props是响应式的  使用es6的解构赋值会让props失去响应式  应用toRefs包裹进行解构赋值
        const { user } = toRefs(props);
        const userCopy = user.value;
        // setup只能访问props,attrs,slots,emit
        console.log(attrs, slots, emit);
        // ref 使基础数据类型通过引用来传递值
        // reactive 只适用于Array & Object
        const book = reactive({
            title: "es6",
        });

        const { age } = getAge();

        return { age, userCopy, book };
    },
    data() {
        return {};
    },
    created() {},
    beforeMount() {},
    mounted() {},
    methods: {
        // 触发watch     setupWatch & noSetupWatch
        handleClick() {
            this.age++;
            console.log(this.age);
        },
    },
    watch: {
        age(newVal) {
            console.log(`noSetup---age:${newVal}`);
        },
    },
};
</script>
